<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>事件处理</title>
</head>
<body>
  <div id="root">
    <h2>事件修饰符</h2>
    <hr>
    <!-- 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="">点击跳转baidu </a>

    <!-- 单次事件-->
    <button @click.once="demo">只会触发首次事件</button>

    <!-- 阻止事件冒泡-->
    <div @click="demo" style="background-color: #CCC; width: 200px; height: 50px; margin: 5px;">
      <div @click.stop="demo" style="background-color: #fff; width: 100px; height: 40px;">点击输出信息</div>
    </div>

    <!-- 使用事件捕获模式 捕获阶段就开始处理事件-->
    <div @click.capture="test" style="background-color: #CCC; width: 200px; height: 50px; margin: 5px;">
      <div @click ="demo" style="background-color: #fff; width: 100px; height: 40px;">点击输出信息</div>
    </div>

    <div @click.self="test" style="background-color: #CCC; width: 200px; height: 50px; margin: 5px;">
      <div @click ="demo" style="background-color: #fff; width: 100px; height: 40px;">点击输出信息</div>
    </div>

    <!-- <ul style="height: 80px; overflow: auto;" @scroll="time"> -->
    <ul style="height: 80px; overflow: auto;" @wheel.passive="time">
      <li style="height: 80px; background-color: #CCC;">1.</li>
      <li style="height: 80px; background-color: #CCC;">2.</li>
      <li style="height: 80px; background-color: #CCC;">3.</li>
      <li style="height: 80px; background-color: #CCC;">4.</li>
      <li style="height: 80px; background-color: #CCC;">5.</li>
    </ul>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
      el: '#root',
      methods: {
        demo() {
          console.log('@@@');
        },
        test() {
          console.log('###');
        },
        time() {
          const t = setTimeout(()=>{
            console.log(1);
          },3000)
        }
      }
    })
  </script>
</body>
</html>